<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>笑脸</title>
		<style>
			/*画圆*/
			#d1{
				width: 600px;
				height: 600px;
				/*画圆：边框、背景色*/
				background-color: #ffff00;
				/*边框倒角条件：边框或背景色*/
				border-radius: 50%;
				/*定位属性：元素直接定位到页面上*/
				/*相对定位：相对于父级元素进行定位；网页 X Y轴*/
				position: relative;
				left: 50px; /*X轴 横向*/
				top: 50px; /*Y轴 横向*/
			}
			#d2{
				width: 350px;
				height: 200px;
				/*画圆：边框、背景色*/
				border: 5px solid #000000;
				border-left-color: #ffff00;
				border-right-color: #ffff00;
				border-bottom-color: #000;
				border-top-color: #ffff00;
				/*边框倒角条件：边框或背景色*/
				border-radius: 50%;
				/*定位属性：元素直接定位到页面上*/
				/*相对定位：相对于父级元素进行定位；网页 X Y轴*/
				position: relative;
				left: 130px; /*X轴 横向*/
				top: 237px; /*Y轴 横向*/
			}
			#d3{
				width: 200px;
				height: 100px;
				/*画圆：边框、背景色*/
				background-color: #ffffff;
				/*边框倒角条件：边框或背景色*/
				border-radius: 50%;
				/*定位属性：元素直接定位到页面上*/
				/*相对定位：相对于父级元素进行定位；网页 X Y轴*/
				position: relative;
				left: -106px; /*X轴 横向*/
				top: -102px; /*Y轴 横向*/
			}
			#d4{
				width: 200px;
				height: 100px;
				/*画圆：边框、背景色*/
				background-color: #ffffff;
				/*边框倒角条件：边框或背景色*/
				border-radius: 50%;
				/*定位属性：元素直接定位到页面上*/
				/*相对定位：相对于父级元素进行定位；网页 X Y轴*/
				position: relative;
				left: 337px; /*X轴 横向*/
				top: 1px; /*Y轴 横向*/
			}
			#d5{
				width: 50px;
				height: 50px;
				/*画圆：边框、背景色*/
				background-color: #000;
				/*边框倒角条件：边框或背景色*/
				border-radius: 50%;
				/*定位属性：元素直接定位到页面上*/
				/*相对定位：相对于父级元素进行定位；网页 X Y轴*/
				position: relative;
				left: -335px; /*X轴 横向*/
				top: 23px; /*Y轴 横向*/
			}
			#d6{
				width: 50px;
				height: 50px;
				/*画圆：边框、背景色*/
				background-color: #000;
				/*边框倒角条件：边框或背景色*/
				border-radius: 50%;
				/*定位属性：元素直接定位到页面上*/
				/*相对定位：相对于父级元素进行定位；网页 X Y轴*/
				position: relative;
				left: 337px; /*X轴 横向*/
				top: 3px; /*Y轴 横向*/
			}
			#d7{
				width: 100px;
				height: 100px;
				/*画圆：边框、背景色*/
				background-color: #ffaaff;
				/*边框倒角条件：边框或背景色*/
				border-radius: 50%;
				/*定位属性：元素直接定位到页面上*/
				/*相对定位：相对于父级元素进行定位；网页 X Y轴*/
				position: relative;
				left: -272px; /*X轴 横向*/
				top: 147px; /*Y轴 横向*/
			}
			#d8{
				width: 100px;
				height: 100px;
				/*画圆：边框、背景色*/
				background-color: #ffaaff;
				/*边框倒角条件：边框或背景色*/
				border-radius: 50%;
				/*定位属性：元素直接定位到页面上*/
				/*相对定位：相对于父级元素进行定位；网页 X Y轴*/
				position: relative;
				left: 332px; /*X轴 横向*/
				top: 8px; /*Y轴 横向*/
			}
			
			
		</style>
	</head>
	<body>
		<!--画八个圆-->
		<div>
			<div id="d1">
				<div id="d2">
					<div id="d3">
						<div id="d4">
							<div id="d5">
								<div id="d6">
									<div id="d7">
										<div id="d8"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>